<template>
  <div class="node-manage">
    <div class="ivrAnnouncementNodeLink-wrap">
      <div class="search">
        <search ref="search" :inputTitle="'请输入节点名称进行查询'" @exportMethod="exportAct" @inputChange="inputChangeAct" :isSystem="isSystem" :disabledReload="disabledReload"></search>
      </div>
      <diyTable :tableHeader="tableHeader" :tableData="tableList" @exportAct="tableOpera"></diyTable>
    </div>
    <left-slide :visible.sync="isShowLeft" @close="close" :title="title">
      <node-deal ref="systemDom" :form="formData" @cancelClick="close" @saveClick="saveNode"></node-deal>
    </left-slide>
  </div>
</template>
<script>
  import {filterAct, handleFakePage} from '@/utils/m7Utils'
  import diyTable from '@/components/ui-modules/diytable/index.vue'
  import leftSlide from '@/components/ui-modules/newConfig/leftSlide.vue'
  import search from '../base/search.vue'
  import nodeDeal from './ivrNodeEditContent/ivrSystemNodeLinkDeal.vue'
  export default {
    name: 'systemNodeLink',
    data () {
      return {
        oldPBX: '', // 暂存pbx 用于pbx变化时对比 判断是否重新刷新
        isSystem: true, // 像搜索组件传值，不显示添加刷新 分页
        Account: '', // 账户id
        title: this.$t('configLazyLoad.process.node'),
        isShowLeft: false, // 弹窗控制值
        disabledReload: true, // 生效按钮是否可用
        formData: { // 双向回呼节点值
          _id: '',
          DisplayName: '',
          Exten: '',
          ToPeerTypeWhenEmpnoNotExist: '',    // 工号不存在转向类型
          ToPeerWhenEmpnoNotExist: '',        // 工号不存在转向值
          ToPeerTypeWhenEmpnoAgentBusy: '',   // 座席忙转向类型
          ToPeerWhenEmpnoAgentBusy: '',       // 座席忙转向值
          ToPeerTypeWhenEmpnoLogoff: '',      // 座席未登陆转向类型
          ToPeerWhenEmpnoLogoff: '',          // 工号不存在转向值
          AgentBusy: '0'                       // 禁止坐席置忙时进线
        },
        tableHeader: [
          {prop: 'DisplayName', label: '节点'},
          {prop: 'Exten', label: '节点ID'},
          {prop: 'UpdateTime', label: '最后更新时间'},
          {prop: 'operaSet', label: '操作', width: 150, opera: [{actMethod: 'update', actName: '修改'}]}
        ], //   自定义 表头
        currentPage: 1,
        tableList: [],   //  用于表格渲染数据
        totalList: [],   //  所有返回的列表数据   需要假分页在处理一下
        handledList: []   //  被模糊搜索过的list数据
      }
    },
    computed: {
      curPbx () {
        return this.$store.state.config.callCenter.currentPBX
      },
      system () {
        return this.$store.state.session.ivrMap[this.curPbx].data.ivr_node_system
      }
    },
    components: {
      search,
      diyTable,
      leftSlide,
      nodeDeal
    },
    watch: {
    },
    methods: {
      // 子组件外抛成功事件
      saveNode (obj) {
        this.tableList = [obj]
        this.totalList = [obj]
        this.handledList = [obj]
        this.isShowLeft = false // 隐藏弹窗
        this.disabledReload = false   //  生效按钮可以点击了
      },
      // 关闭弹窗
      close () {
        this.isShowLeft = false
      },
      // 添加刷新生效方法接收
      exportAct (val) {
        this[val]()
      },
      // 生效
      active () {
        let obj = {
          PBX: this.curPbx,
          Account: this.$store.state.session.account.account
        }
        this.$store.dispatch('reloadIvr', obj).then(res => {
          if (res.success) {
            this.disabledReload = true
            this.$message({
              type: 'success',
              message: this.$t('configLazyLoad.process.effectiveSuccessfully')
            })
          }
        })
      },
      //  搜索列表
      inputChangeAct (val) {
        this.handledList = filterAct(val, 'DisplayName', this.totalList)
        this.count = this.handledList.length || 0
        this.currentPage = 1
        this.tableList = handleFakePage(this.currentPage, this.handledList)
      },
      // 表格操作栏事件
      tableOpera (obj) {
        let data = obj.data
        if (obj.actMethod === 'update') {
          this.title = '修改系统节点'
          this.formData = data
          this.$refs.systemDom.initSelect()
          this.isShowLeft = true
        }
      },
      // 渲染表格
      initTable () {
        let system = this.system
        // 循环缓存设置里面的数据 判断
        for (let i = 0; i < system.length; i++) {
          if (system[i].Exten && system[i].Exten === '2') {
            this.tableList = [system[i]]
            this.handledList = [system[i]]
            this.totalList = [system[i]]
          }
        }
      }
    },
    deactivated () {
      this.oldPBX = this.curPbx
    },
    activated () {
      if (this.oldPBX !== this.curPbx) {
        this.initTable()
      }
    },
    beforeMount () {
      this.initTable()
      this.oldPBX = this.$store.state.config.callCenter.currentPBX
    }
  }
</script>

<style lang="stylus" scoped>
  .search
    border 1px solid #E7E7EB
    border-bottom none
</style>
